<template>
  <div class="scroll-500">
    <el-button-group style="margin-bottom: 10px; margin-top: 10px">
      <el-button
        @click="addBanner"
        type="primary"
        icon="el-icon-circle-plus-outline"
        >新增轮播图</el-button
      >
    </el-button-group>
    <div style="display: flex; flex-wrap: wrap">
      <el-card
        class="box-card"
        style="width: 400px; margin-right: 20px; margin-bottom: 20px"
        v-for="(item, index) in bannerList"
        :key="index"
      >
        <div slot="header" class="clearfix">
          <span>轮播图 {{ index + 1 }}</span>
          <el-button
            style="float: right; padding: 3px 0; margin-left: 10px"
            type="text"
          >
            <el-link type="danger">删除</el-link>
          </el-button>
          <el-button
            @click="item.isEdit = true"
            style="float: right; padding: 3px 0"
            type="text"
          >
            <el-link type="primary">修改</el-link>
          </el-button>
        </div>
        <div>
          <el-image v-if="item.picUrl" :src="item.picUrl | imgPreFilter" @click="uploadImg(index)">
          </el-image>
          <div v-else>
              <i class="el-icon-picture-outline" style="font-size:60px"  @click="uploadImg(index)"></i>
          </div>
          <input
            type="file"
            @change="uploadImgInputChange"
            hidden
            id="bannerUploadInput"
          />
          <el-form :label-position="'top'" size="small">
            <el-form-item label="跳转链接">
              <el-input v-if="item.isEdit" v-model="item.jumpUrl"></el-input>
              <div style="width: 100%; word-break: break-all" v-else>
                {{ item.jumpUrl }}
              </div>
            </el-form-item>
            <el-form-item label="排序">
              <el-input v-if="item.isEdit" v-model="item.picCode"></el-input>
              <div v-else>{{ item.picCode }}</div>
            </el-form-item>
            <el-form-item v-if="item.isEdit">
              <el-button @click="saveBanner(item)" type="primary"
                >保存</el-button
              >
            </el-form-item>
          </el-form>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import { get_banner_list_api, edit_banner_api,add_banner_api } from "@/api/banner";
import uploader from "@/utils/upload";
export default {
  name: "banner",
  data() {
    return {
      bannerList: [
        // {
        //     picUrl: 'http://img.gek6.com/Fr4HTIqWh2mOiOOpOQ4nUjXdv0o4',
        //     jumpUrl: 'http://img.gek6.com/Fr4HTIqWh2mOiOOpOQ4nUjXdv0o4',
        //     isEdit: false
        // }
      ],
      uploadImgIndex: null,
    };
  },
  methods: {
    uploadImg(index) {
      this.uploadImgIndex = index;
      if (this.bannerList[index].isEdit) {
        document.querySelector("#bannerUploadInput").click();
      }
    },
    uploadImgInputChange(e) {
      let file = e.target.files[0];
      uploader.uploadImg(file).then((res) => {
        console.log("----------------");
        this.bannerList[this.uploadImgIndex].picUrl = res;
      });
    },
    getBanner() {
      get_banner_list_api().then((res) => {
        if (res.data.records && res.data.records.length > 0) {
          res.data.records.forEach((item) => {
            item.isEdit = false;
          });
          this.bannerList = res.data.records;
        }
      });
    },
    addBanner() {
      this.bannerList.push({
        picUrl: "",
        jumpUrl: "",
        isEdit: true,
      });
    },
    saveBanner(item) {
      console.log(item);
      if (item.rotationId) {
        edit_banner_api(item).then((res) => {
          this.$message.success("保存成功");
          item.isEdit = false;
        });
      } else {
        add_banner_api(item).then((res) => {
          this.$message.success("保存成功");
          item.isEdit = false;
        });
      }
    },
  },
  mounted() {
    this.getBanner();
  },
};
</script>

<style scoped>
.scroll-500 {
  height: 800px;
  overflow-y: scroll;
}
</style>
